import React from "react";
import {connect} from 'dva';
import {Button, Card, Form, message, Spin, Table, Tooltip} from "antd";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import witty from "@/utils/wittyUtils";
import FilterForm from "@/components/BaseForm/FilterForm";
import EditElevator from "@/pages/management/elevator/EditElevator";
import router from "umi/router";

let pagingData = {
    _pageSize: 10,
    _current: 1,
    _total: 0,
};

@connect(({inquiryModel, elevatorModel}) => ({
    inquiryModel, elevatorModel
}))
class AdminElevator extends React.Component {
    state = {
        //-- 页面数据
        dataSource: [],
        //-- 加载层
        loading: false,
        //-- [true]: 显示搜索条件, [false]: 隐藏搜索条件
        showMoreSearchForm: false,
        //-- 选中的RowKeys
        selectedRowKeys: [],
        //-- 选中的Rows
        selectedRows: [],
    }

    componentDidMount() {
        //-- 获取表格数据
        this.findPageData();
    }

    /**
     * 查询页面数据
     */
    findPageData = function (params = {}) {
        const thisCtx = this;
        const {dispatch} = this.props;

        if (params.createTime) {
            params.startDate = params.createTime[0].format('YYYY-MM-DD');
            params.endDate = params.createTime[1].format('YYYY-MM-DD');
            delete params.createTime;
        }
        if (params.limitDate) {
            params.record_startDate = params.limitDate[0].format('YYYY-MM-DD');
            params.record_startDate = params.limitDate[1].format('YYYY-MM-DD');
            delete params.limitDate;
        }

        params.currentPage = pagingData._current;
        params.pageSize = pagingData._pageSize;
        console.log(params);
        thisCtx.setState({loading: true});
        dispatch({
            type: 'elevatorModel/elevatorInfoList',
            payload: params,
            callback: function (data) {
                thisCtx.setState({loading: false});
                if (data && data.success) {
                    const paging = data.datas.pagination;
                    pagingData._current = paging.current + 1;
                    pagingData._pageSize = paging.pageSize;
                    pagingData._total = paging.total;
                    thisCtx.setState({
                        //-- 重置选中的行
                        selectedRowKeys: [],
                        selectedRows: [],
                        dataSource: data.datas.list,
                    });
                } else {
                    message.error('电梯信息获取失败');
                }
            }
        });
    }

    /**
     * 显示或者隐藏 [更多搜索条件]
     */
    showOrHideMoreSearchForm = () => {
        const {showMoreSearchForm} = this.state;

        this.setState({
            showMoreSearchForm: !showMoreSearchForm,
        });
    };

    handleFilter = (params) => {
        this.params = params;
        witty.validNilParams(params)
        if (witty.isValidObj(params)) {
            pagingData._current = 1;
            witty.validNilParams(params);
            this.findPageData(params);
        }
    }

    handlerGoInquiry = () => {
        const {selectedRowKeys} = this.state;
        const thisCtx = this;
        const {dispatch} = this.props;

        if (selectedRowKeys.length > 0) {
            let params = {};
            params.elevatorIds = selectedRowKeys.join(',');
            console.log(params);
            // this.setState({loading: true});
            dispatch({
                type: 'inquiryModel/insertInquiry',
                payload: params,
                callback: function (data) {
                    // thisCtx.setState({loading: false});
                    if (data && data.success) {
                        thisCtx.setState({
                            //-- 重置选中的行
                            selectedRowKeys: [],
                            selectedRows: [],
                        });
                        router.push({
                            pathname: '/manage/inquiry/detail',
                            state: {id: data.datas.id}
                        });
                    } else {
                        message.error(data.msg);
                    }
                }
            });
        } else {
            message.info('请选中至少一行数据')
        }
    }

    formList = [
        {
            type: 'INPUT',
            label: '用户名',
            field: 'empName',
            placeholder: '请输入用户名',
        },
        {
            type: 'INPUT',
            label: '使用单位',
            field: 'uorgName',
            placeholder: '请输入使用单位',
        },
        {
            type: 'SELECT',
            label: '保单状态',
            field: 'xstatus',
            list: [{id: '0', name: '未知'}, {id: '1', name: '保障中'}, {id: '2', name: '已过期'}]
        },
        {
            type: 'RANGEPICKER',
            label: '创建时间',
            field: 'createTime',
        },
        {
            type: 'RANGEPICKER',
            label: '保障期限',
            field: 'limitDate',
        },
    ]

    render() {

        const {showMoreSearchForm, loading, selectedRowKeys, dataSource} = this.state;

        const buttonsStyle = {
            style: {
                marginRight: '15px',
            },
        };

        /**
         * 表格选中事件
         */
        const rowSelection = {
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRowKeys: selectedRowKeys,
                    selectedRows: selectedRows,
                });
            },
        };

        return (
            <div>
                <Spin spinning={loading}>
                    <PageHeaderWrapper>
                        <Card style={{width: '100%', marginTop: '10px'}}>
                            <FilterForm formList={this.formList} filterSubmit={this.handleFilter}/>
                        </Card>

                        <Card style={{width: '100%', marginTop: '10px'}}>
                            <Tooltip title='导出'>
                                <Button
                                    icon="export"
                                    type="primary"
                                    {...buttonsStyle}
                                    onClick={() => message.info('导出功能还未实现,敬请期待')}
                                >
                                    导出
                                </Button>
                            </Tooltip>
                        </Card>

                        <Card style={{width: '100%', marginTop: '10px', overflow: "auto"}}>
                            <Table
                                bordered
                                rowKey={data => `${data.id}`}
                                rowSelection={rowSelection}
                                columns={this.columns}
                                dataSource={dataSource}
                                pagination={{
                                    pageSize: pagingData._pageSize,
                                    current: pagingData._current,
                                    total: pagingData._total,
                                    onChange: (page) => {
                                        pagingData._current = page;

                                        this.findPageData();
                                    },
                                    showTotal: total => `共 ${total} 条数据`,
                                    style: {
                                        float: "left"
                                    }
                                }}
                            />
                        </Card>
                        <EditElevator onRef={this.onRefEditElevator} parent={this}/>
                    </PageHeaderWrapper>
                </Spin>
            </div>
        );
    }

    onRefEditElevator = element => {
        this.editElevator = element;
    };

    /**
     * 表格列
     */
    columns = [
        {
            title: '电梯设备ID',
            align: 'center',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '用户名',
            align: 'center',
            dataIndex: 'empName',
            key: 'empName',
        },
        {
            title: '上传时间',
            align: 'center',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '使用单位名称',
            align: 'center',
            dataIndex: 'uorgName',
            key: 'uorgName',
        },
        {
            title: '设备代码',
            align: 'center',
            dataIndex: 'elevatorCode',
            key: 'elevatorCode',
        },
        {
            title: '保障期限',
            align: 'center',
            dataIndex: 'limitDate',
            key: 'limitDate',
        },
        {
            title: '保单状态',
            align: 'center',
            dataIndex: 'xstatusName',
            key: 'xstatusName',
        },
        {
            title: '信息完善程度',
            align: 'center',
            dataIndex: 'fstatusName',
            key: 'fstatusName',
        },
        {
            title: '操作',
            align: 'center',
            key: 'detail',
            render: (text, record) => {
                return <a href='#' onClick={() => this.editElevator.handlerEditElevator(record.id)}>查看详情</a>
            },
        },
    ]
}

export default Form.create()(AdminElevator);
